<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-select v-model="selectValue" clearable placeholder="请选择" style="width: 110px;">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input
            style="width: 130px;margin-left: 10px;"
            placeholder="请输入内容"
            v-model="selectInput"
            clearable>
          </el-input>
          <el-button plain style="margin-left: 10px;" @click="select">搜索</el-button>
          <el-dialog title="搜索结果" :visible.sync="dialogTableVisible" width="1000px">
            <el-table :data="myselect">
              <el-table-column width="50" property="id" label="编号"></el-table-column>-->
              <el-table-column width="50" property="name" label="姓名"></el-table-column>
              <el-table-column width="50" property="password" label="密码"></el-table-column>
              <el-table-column width="80" property="baseSalary" label="基本工资"></el-table-column>
              <el-table-column width="50" property="sex" label="性别"></el-table-column>
              <el-table-column width="160" property="tel" label="联系电话"></el-table-column>
              <el-table-column width="160" property="idCard" label="身份证"></el-table-column>
              <el-table-column width="130" property="rolePermiEntity.name" label="群组角色"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="handleEdit(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
                  <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
        </div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div class="grid-content bg-purple">
          <el-button plain @click="addStaff">添加</el-button>
          <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="员工姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="基本工资" :label-width="formLabelWidth">
                <el-input v-model="form.baseSalary" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="form.sex" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="form.tel" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="身份证" :label-width="formLabelWidth">
                <el-input v-model="form.idCard" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="群组角色" :label-width="formLabelWidth">
                <el-select v-model="form.rolePermiEntity.name" placeholder="请选择角色">
                  <el-option label="普通管理员" value="普通管理员"></el-option>
                  <el-option label="超级管理员" value="超级管理员"></el-option>
                  <el-option label="会计" value="会计"></el-option>
                  <el-option label="服务员" value="服务员"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveAddStaff">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <StaffTable></StaffTable>
    </el-row>
  </div>
</template>

<script>
    import StaffTable from './StaffTable'
    import {mapActions} from 'vuex'
    import * as url from '../../../api/lypApi'
    export default {
        name: "Staff",
        components:{
            StaffTable
        },
        data(){
            return{
                selectOptions: [
                    {
                        value: 'id',
                        label: '编号'
                    }, {
                        value: 'name',
                        label: '姓名'
                    }, {
                        value: 'password',
                        label: '密码'
                    }, {
                        value: 'baseSalary',
                        label: '基本工资'
                    }, {
                        value: 'sex',
                        label: '性别'
                    }, {
                        value: 'tel',
                        label: '联系电话'
                    }, {
                        value: 'idCard',
                        label: '身份证'
                    }, {
                        value: 'role',
                        label: '群组角色'
                    }
                ],
                selectValue: '',
                selectInput:'',
                myselect:[],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    password: '',
                    baseSalary: '',
                    sex: '',
                    tel: '',
                    idCard: '',
                    rolePermiEntity:{name: ''},
                },
                formLabelWidth: '120px'
            }
        },
        methods:{
            saveAddStaff(){
                this.dialogFormVisible = false
                console.log(this.form)
                this.form.baseSalary= parseInt(this.form.baseSalary)
                this.$axios({
                    url:`/lypApi${url.ADDSTAFF}`,
                    method:'post',
                    data:{
                        "baseSalary": this.form.baseSalary,
                        "idCard": this.form.idCard,
                        "name": this.form.name,
                        "password": this.form.password,
                        // "roleId": this.form.roleId,
                        "sex": this.form.sex,
                        "tel": this.form.tel,
                    }
                }).then(res=>{
                    console.log(res)
                }).catch(err=>{
                    console.log(err)
                })
            },
            addStaff(){
                this.dialogFormVisible = true
            },
            ...mapActions(['selectStaffData']),
            ...mapActions(['getStaffData']),
            select(){
                this.dialogTableVisible = true
                //this.$store.dispatch('selectData',[this.selectValue,this.selectInput])
                this.selectStaffData([this.selectValue,this.selectInput]).then(res=>{
                    console.log(res)
                    this.myselect=res
                })

            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(row.id);
                this.$store.dispatch('deleteStaffData',row)
            },
        }
    }
</script>

<style scoped>

</style>
